<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/global.css">
		<script src="../../js/getURLParam.js"></script>
		  <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.3&key=e51bd3d35de6fe57218feaa7e579481f "></script>
    
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
		<style>
			html,
			body{
				background-color: #fff;	
			}
			.mui-content {
				background-color: #fff;
			}
			
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
			
			* {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav headerstyle" >
			<a class="mui-action-back astyle"><img src="../../images/drawable-hdpi/head_back.png"/></a>
			<span id="title">轨迹</span>
		</header>
		<div style="margin-top: 44px;;height: auto;width: 100%;" id="container"></div>
		<script src="../../js/mui.min.js"></script>
		<script>
		mui.init();
		var sessionid=GetQueryString("sessionid");
	    var proVersion = GetQueryString("proVersion");
	    var accountid=GetQueryString("accountId");
	    var vclId=GetQueryString("vclId");
	    var bgnTime =GetQueryString("bgnTime");
	    var endTime = GetQueryString("endTime");
		 var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 5
    });
    var lin=new Array();
    var markerbegin = new AMap.Marker();
    var markerend = new AMap.Marker();
	
	        mui.ajax('../../../APP/trackQuery', {
				data: {
					param: '{"proVersion":"'+proVersion+'","accountId":"'+accountid+'","sessionid":"'+sessionid+'","data":{"vclId":"'+vclId+'","bgnTime":"'+bgnTime+'","endTime":"'+endTime+'"}}'
					//param: '{"proVersion":"1.0","accountId":"216","sessionid":"","data":{"vclId":"159814","bgnTime":"2016-05-01","endTime":"2016-05-01"}}'
				},
				dataType: 'jsonp', //服务器返回json格式数据
				type: 'post', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒；
				success: function(data) {
					var jsonObj = window.JSON.parse(data);
					if (jsonObj.resultCode == "1") {
						var latlng=jsonObj.data;
						if(latlng.length>0){
							for(var n=0;n<latlng.length;n++){
								var lat=latlng[n];
								for(var i=0;i<lat.length;i++){
									if(n==0&&i==0){
										markerbegin.setPosition([lat[i].lng,lat[i].lat]);
									    markerbegin.setIcon("../../images/drawable-xxhdpi/track_start.png");
									}
									if(n==(latlng.length-1)&&i==(lat.length-1)){
										markerend.setPosition([lat[i].lng,lat[i].lat]);
									    markerend.setIcon("../../images/drawable-xxhdpi/track_end.png");
									}
									lin[i]=[lat[i].lng,lat[i].lat];
								}
								var polyline = new AMap.Polyline({
							        path: lin,          //设置线覆盖物路径
							        strokeColor: "#3366FF", //线颜色
							        strokeOpacity: 1,       //线透明度
							        strokeWeight: 5,        //线宽
							        strokeStyle: "solid",   //线样式
							        strokeDasharray: [10, 5] //补充线样式
					   			});
					   			polyline.setMap(map);
					   			lin=new Array();
							}
							map.setCenter(markerbegin.getPosition());
							map.setZoom(10);
							markerbegin.setMap(map);//设置起点
							markerend.setMap(map);//设置终点
						}
					} else {
					}
				},
				error: function(xhr, type, errorThrown) {
				}
			});
		</script>
	</body>

</html>